<template>
  <div class="form_box">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
         <roleBasicInput ref="roleBasicInputRef"></roleBasicInput>
      </el-tab-pane>
      <el-tab-pane label="配置菜单" name="second">
          <template v-if="activeName == 'second'">
            <roleModuleInput ref="roleModuleInputRef"></roleModuleInput>
          </template>
      </el-tab-pane>
      <el-tab-pane label="配置许可信息" name="third">
          <template v-if="activeName == 'third'">
            <rolePerInput ref="rolePerInput"></rolePerInput>
              <!-- <rolePermissionInput ref="rolePermissionInput" :id="form.id"></rolePermissionInput> -->
          </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent ,ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { roleBasicInput,roleModuleInput,rolePerInput } from './impl'


export default defineComponent({
  name: 'RoleEdit',

  components: {
    roleBasicInput,
    roleModuleInput,
    rolePerInput
  },

  data(){
    return {  
      id : '' as any,    
      activeName : "first",
      loading : false
    }
  },

  methods:{
    init(){
      if(this.loading){
        return
      }

      this.loading = false;
    },

    handleClick(){

    },

    submitForm(){
    }
  },

  mounted(){

  },

  watch: {
    'activeName': function(){
      if(this.activeName == "first"){
        this.initRoleBasic();
      }

      if(this.activeName == "second"){
        this.$nextTick(()=>{
          this.initRoleMenu();
        })    
      }
      if(this.activeName == "third"){
        this.$nextTick(()=>{
          // this.$refs.rolePermissionInput.init();
        })    
      }
    }
  },

  created(){
    
  },

  setup(){
    // const store = useStore()
    
    const roleBasicInputRef = ref(null) as any
    const initRoleBasic = () => {
      // console.log("roleBasicInputRef",roleBasicInputRef)
      roleBasicInputRef.value.init();
    }

    const roleModuleInputRef = ref(null) as any
    const initRoleMenu = () =>{
      roleModuleInputRef.value.init();
    }

    const rolePerInput = ref(null) as any
    const initRolePer = () =>{
      rolePerInput.value.init();
    }

    return {
      roleBasicInputRef,
      initRoleBasic,
      roleModuleInputRef,
      initRoleMenu,
      rolePerInput,
      initRolePer
    }

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
